/**
 * 使用usecontext 设置网页主题颜色
 */
import React, { useState, useEffect } from 'react';
import styled from 'styled-components';
import ThemeContext from '../hooks/theme';
import { getAppTheme } from '../service/common';
import Card from '../components/Card';

function Theme() {
  const [theme, setTheme] = useState({});
  useEffect(() => {
    getAppTheme()
      .then((theme) => {
        setTheme(theme);
      })
      .catch(() => {
        setTheme({});
      });
  }, []);
  return (
    <ThemeContext.Provider value={theme}>
      <ThemeContainer>
        <Card>我是使用主题的组件</Card>
      </ThemeContainer>
    </ThemeContext.Provider>
  );
}

const ThemeContainer = styled.div`
  padding: 20px;
`
export default Theme;
